<style lang="scss" scoped>
@import '../static/common/variable.scss';
nav {
    width: 100%;
    padding: $pad;
    ul {
        width: 100%;
        // display: grid;
        // grid-auto-rows: 86px;
        // grid-template-columns: repeat(4,1fr);
        list-style: none;
        // row-gap: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
            flex-basis: 25%;
            a {
                display: block;
                width: 100%;
                text-decoration: none;
                color: #000;
                font-size: 16px;
                text-align: center;
            }
            .img-box {
                line-height: 60px;
                height: 60px;
                overflow: hidden;
            }
            img {
                width: 50%;
                vertical-align: middle;
            }
            p {
                padding-top: 5px;
                color: #666;
                font-size: 16px;
            }
        }
    }
}

</style>
<template>
    <nav>
        <ul>
            <li v-for="item in classifys">
                <RouterLink :to="{path: '/classify',query:{classify_text: item.classify_text}}">
                 <div>
                    <div class="img-box"><img :src="item.classify_src" alt=""></div>
                    <p>{{ item.classify_text }}</p>
                 </div>
                </RouterLink>
            </li>
        </ul>
    </nav>
</template>

<script lang="ts" setup> 
import { ref } from 'vue'
import { listClassifyFn } from '../api';

interface classifyItem {
    id?: string;
    classify_text: string;
    classify_src: string;
}
let classifys = ref<classifyItem[]>([])
const listClassify = async ()=> {
    await listClassifyFn()
    .then(
        content=>{
            // console.log('1.0',content)
            let {code , msg , result} = content;
            if(code == 200) {
                classifys.value = result;
            }
            // console.log("msg:",msg)
        }
    )
}

listClassify();



</script>